import { tr } from 'date-fns/locale';
import React, { useEffect, useState,useMemo } from 'react';
import { View, SafeAreaView, StyleSheet, Image as Image2,Modal, Text,Pressable, TouchableHighlight, TouchableOpacity, ScrollView, Platform, UIManager, Button, Alert, TextInput, FlatList, Keyboard,LayoutAnimation } from 'react-native';
import { AccordionItem, AccordionList } from 'react-native-accordion-list-view';
import Icon from 'react-native-vector-icons/Ionicons';
import { useFocusEffect, useRoute } from '@react-navigation/native';
import { number } from 'yup';
import { Center, Image, NativeBaseProvider,Select, Box, CheckIcon,Skeleton, VStack,Actionsheet,useDisclose } from "native-base";
import { getList,planEdit } from "../../services/plan";
import { showToast } from "../../utils/toast";
import * as S from "../Home/styles";
import { ImageMap } from "../../constants/categories";
import EmptyView from "../../components/EmptyView";
import { red } from 'react-native-reanimated/lib/typescript/reanimated2/Colors';
import SkeletonView from "../../components/Skeleton";
import AsyncStorage from "@react-native-async-storage/async-storage";
import { background } from 'native-base/lib/typescript/theme/styled-system';


const MadalScreen = ({modalVisible,setModalVisible}:any)=>{

  const [ pageNmu,setPageNum ] = useState(1)
  
  return(
    <Modal
      visible={modalVisible}
      transparent={false}
      animationType="fade"
      >
      <Pressable style={{flex:1,backgroundColor:'rgba(0, 0, 0, 0.72)',paddingTop:Platform.OS=='ios'? 0 :0}} onPress={()=>{
        setPageNum(pre=>pre+1)
        // Alert.alert(JSON.stringify(pageNmu))
        if(pageNmu>=1){
          setModalVisible(false)
          AsyncStorage.setItem('guideBudget','1')
        }
      }}>
        {/* <ImageBackground
          style={{flex:1,backgroundColor:'red'}}
          source={require("../../assets/guidePage/home_1.png")}
        ></ImageBackground> */}
        {
          pageNmu == 1 
          ?
          <Image2
            style={{width:'100%',height:"100%",}}
            source={require("../../assets/guidePage/budget_1.png")}
          />
          :
          ''
        }



      </Pressable>
    </Modal>
    
  )
}




const getAverageTime = (time:any)=>{
  return returnFloat1(time/365,1)
}


const returnFloat1 =(value:any, decimalPlaces:any) => {
  // 将数字格式化为指定位数的小数
  const formattedNumber = Number(value).toFixed(decimalPlaces);

  // 使用正则表达式去掉小数部分末尾的零
  const regex = /\.?0+$/;
  return formattedNumber.replace(regex, '');
}


// 获取当前年份
const currentYear = new Date().getFullYear();

// 生成包含当前年份及前两年和后两年的年份列表
const yearList = Array.from({ length: 5 }, (_, index) => currentYear - 2 + index);
let pageCurrentYear = yearList[2].toString()

// 打印年份列表
console.log("年份列表:", yearList);


const Title = ({init,year}:any) => {

  const {
    isOpen,
    onOpen,
    onClose
  } = useDisclose();
  const [service, setService] = React.useState(year);
  const changeYear = (itemValue:any)=>{
    pageCurrentYear = itemValue
    setService(itemValue)
    init(itemValue)
  }
  return  <View style={styles.titleBox}>
            <Text style={styles.titleText}>时间预算</Text>
            <View style={styles.titleBoxRight}>
              <TouchableOpacity onPress={()=>{onOpen()}}>
                <View style={{flexDirection:'row',alignItems:'center'}}>
                  <Text style={{ fontSize: 14, fontWeight: '600', marginRight: 6 , color:'#000' }}>{service}年</Text>
                  <Icon name="caret-down" size={12} color="#rgba(0, 0, 0, 0.64)" />
                </View>
              </TouchableOpacity>
              {/* <Icon name="caret-down" size={12} color="#rgba(0, 0, 0, 0.64)" /> */}
              {/* <Select variant='unstyled' dropdownIcon={<Icon name="caret-down" size={12} color="#rgba(0, 0, 0, 0.64)" />}  fontSize={14} color="#000"  minWidth='20' margin={0} padding={0} fontWeight={'600'} selectedValue={service}  accessibilityLabel={service}   _selectedItem={{
                  // bg: "teal.600",
                  activeOpacity:"#fff",
                  
                  endIcon: <CheckIcon size="5" />
                }} mt={1} onValueChange={itemValue => changeYear(itemValue)}>
                    {
                      yearList.map((item,index)=>{
                        return <Select.Item key={index} bgColor={'#fff'} label={item.toString()} value={item.toString()} />
                      })
                    }
                   
              </Select> */}

              <Actionsheet isOpen={isOpen} onClose={onClose}>
                <Actionsheet.Content>
                  {/* <Actionsheet.Item style={styles.actionItem} onPress={()=>{
                    // editClassify()
                  }}>
                    <Text style={styles.actionItemText}>编辑</Text>
                  </Actionsheet.Item> */}

                  {
                     yearList.map((item,index)=>{
                      return (
                        <Actionsheet.Item key={index} style={styles.actionItem} onPress={()=>{
                          // editClassify()
                          changeYear(item)
                          onClose()
                        }}>
                          <Text style={styles.actionItemText}>{item}年</Text>
                        </Actionsheet.Item>
                      )
                        
                     })
                  }

                </Actionsheet.Content>
            </Actionsheet>




              {/* <Icon name="caret-down" size={12} color="#rgba(0, 0, 0, 0.64)" /> */}
            </View>
          </View>
};

const RenderItemDom = ({ item,openInput}) =>{

  const [isExpanded, setIsExpanded] = useState(item.archive? false : true);

  const toggleExpandCollapse = () => {
  //   setTimeout(()=>{
  //     // flatListRef.current.scrollToOffset({ offset: 10000, animated: true });
  //   },500)
    // Alert.alert(id)
    // 使用 LayoutAnimation 实现动画效果

    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    // let arr = JSON.parse(JSON.stringify(categoryList))
    // arr.forEach((accordion:any) => {
    //   accordion.isExpanded = id === accordion.id ? !accordion.isExpanded : false
    // });
    setIsExpanded((pre)=>!pre)

  }

  const url = ImageMap.find((image) => {
    return image.name === item.icon;
  })?.url;
  return (

    <View style={{borderRadius:16,overflow:'hidden',marginBottom:16,}}>

      <TouchableOpacity onPress={()=>{toggleExpandCollapse()}}>

        <View style={styles.itemTitle}>
          <View style={styles.itemTitleLeft}>
            {/* <Image
              prefetch={}
              style={{ width: 22, height: 22 }}
              source={require('../../assets/images/file.png')}
            /> */}
            {
              item.icon && !item.archive ? <Image source={url} size="xl" alt='Image' style={{ width: 20, height: 20,marginRight: 8 }} /> : ''
            }
            <Text numberOfLines={1} ellipsizeMode="tail" style={styles.itemTitleLeftText}>{item.name}</Text>
            {
              item.hasChildren 
              ? 
              <View style={ isExpanded ? {transform: [{ rotate: '0deg' }]} :{transform: [{ rotate: '270deg' }]}}>
                <Icon name="caret-down" size={12} color="#rgba(0, 0, 0, 0.64)" />
              </View>
              : ''
            }
          </View>
          <View style={styles.itemTitleRight}>
            {
              item.hasChildren
                ?
                <Text style={{ ...styles.itemTitleRightText }}>{returnFloat1(item.totalTime,1)}h</Text>
                :
                <TouchableHighlight
                  underlayColor='#fff'
                  style={{ ...styles.itemTitleRightText, alignItems: 'flex-end' }}
                  onPress={() => {
                    openInput(item.id,item.name,item.totalTime,item)
                  }}
                >
                  <Text style={{color:'#2C2C2E',lineHeight:24,fontSize:14,fontWeight:700,fontFamily:'HarmonyOS Sans SC',}}>{returnFloat1(item.totalTime,1)}h</Text>
                </TouchableHighlight>

            }
            {
              item.hasChildren
                ?
                <Text style={{ ...styles.itemTitleRightText }}>{getAverageTime(item.totalTime)}h/天</Text>
                :
                <TouchableHighlight
                  underlayColor='#fff'
                  style={{ ...styles.itemTitleRightText, alignItems: 'flex-end' }}
                  onPress={() => {
                    openInput(item.id,item.name,item.totalTime,item)
                  }}
                >
                  <Text style={{color:'#2C2C2E',fontSize:14,fontWeight:700,fontFamily:'HarmonyOS Sans SC',}}>{getAverageTime(item.totalTime)}h/天</Text>
                </TouchableHighlight>

            }
          </View>

        </View>
      </TouchableOpacity>

      {
        item.hasChildren && isExpanded
        ?
        <View style={{ ...styles.customBody, }}>
          {item.children.map((res, index) => {
            return (
              <View key={index} style={styles.customBodyItem}>
                <View style={[styles.customBodyLeft, !item.archive ? ( res.level == 2 ? { borderTopWidth:2 } : {}) : (  res.level == 1 ? { borderTopWidth:2 } : {}) ]}>
                  <Text style={[
                    !item.archive ?  (res.level == 3 ? { paddingLeft: 8 } : '') : res.level == 2 ? { paddingLeft: 8 } : res.level == 3 ? { paddingLeft: 16 } :'',{...styles.customBodyRightItemText},]
                  }>{item.archive&&(res.level == 2) ? '-' : item.archive&&(res.level == 3) ? '--' : ''}{res.name}</Text>
                </View>
                <View style={styles.customBodyRight}>
                  {
                    !res.hasChildren ?
                      <TouchableHighlight
                        underlayColor='#fff'
                        style={[styles.customBodyRightItem, !item.archive ? (!item.archive ? ( res.level == 2 ? { borderTopWidth:2 } : {}) : (  res.level == 1 ? { borderTopWidth:2 } : {}) ) : (  res.level == 1 ? { borderTopWidth:2 } : {}) ]}
                        onPress={() => {
                          openInput(res.id,`${item.name}`,res.totalTime,res)
                        }}
                      >
                        <Text style={{ ...styles.customBodyRightItemText,color:'#AEAEB2'}}>{returnFloat1(res.totalTime,1) == '0' ? '总计h' : returnFloat1(res.totalTime,1)}</Text>
                      </TouchableHighlight>
                      :
                      <View style={[styles.customBodyRightItem,!item.archive ? ( res.level == 2 ? { borderTopWidth:2 } : {}) : (  res.level == 1 ? { borderTopWidth:2 } : {}) ]}>
                        <Text style={{ ...styles.customBodyRightItemText }}>{returnFloat1(res.totalTime,1) == '0' ? '-' : returnFloat1(res.totalTime,1)}</Text>
                      </View>
                  }
                  {
                    !res.hasChildren ?
                      <TouchableHighlight
                        underlayColor='#fff'
                        style={[styles.customBodyRightItem,!item.archive ? ( res.level == 2 ? { borderTopWidth:2 } : {}) : (  res.level == 1 ? { borderTopWidth:2 } : {}) ]}
                        onPress={() => {
                          openInput(res.id,`${item.name}`,res.totalTime,res)
                        }}
                      >
                        <Text style={[styles.customBodyRightItemText,{color:'#AEAEB2'}]}>{getAverageTime(res.totalTime) == '0' ? 'h/天' : getAverageTime(res.totalTime)}</Text>
                      </TouchableHighlight>
                      :
                      <View style={[styles.customBodyRightItem,!item.archive ? ( res.level == 2 ? { borderTopWidth:2 } : {}) : (  res.level == 1 ? { borderTopWidth:2 } : {}) ]}>
                        <Text style={styles.customBodyRightItemText}>{getAverageTime(res.totalTime) == '0' ? '-' : getAverageTime(res.totalTime)}</Text>
                      </View>
                  }
                  <View style={styles.customBodyRightItem}>
                    {/* <Text style={styles.customBodyRightItemText}>1.5</Text> */}
                  </View>
                </View>
              </View>
            )
          })}

        </View>
        :
        ''
      }
      
    </View>
    
  )


};







const Budget = ({ navigation }:any) => {
  const [data, setData] = useState([])
  const [isLaoding,setisLaoding] = useState(false)
  const [modalVisible, setModalVisible] = useState(false);
  const [modalVisible2, setModalVisible2] = useState(false);
  const [allTotalATime,setAllTotalTime] = useState(0)
  const [totalTime,setTotalTime] = useState('')
  const [averageTime,setAverageTime] = useState('')
  const [selectedItem,setSelectItem] = useState({id:'',otalTime:'',level:'1',parentId:'',archive:false,totalTime:''})

  const submit = ()=>{
    let obj = { id:selectedItem.id ,level:selectedItem.level,totalTime:selectedItem.totalTime,year:pageCurrentYear}
    console.log(obj)
    planEdit(obj).then((res:any)=>{
      console.log(res)
      if(res.code == 0){
        // showToast('','','提交成功')
      }
    })
  }

  const setTotalTimeFun = ()=>{
    let time = Number(totalTime) - Number(selectedItem.totalTime)
    if(!selectedItem.archive){
      if(selectedItem.level == '2'){
        data.forEach((item:any)=>{
          if(selectedItem.parentId == item.id){
            item.totalTime = Number(item.totalTime) + time
          }
        })
      }
      if(selectedItem.level == '3'){
        let finditem = {}

        data.forEach((item:any)=>{
          if(item.hasChildren){
            item.children.forEach((n:any)=>{
              if(selectedItem.parentId == n.id){
                n.totalTime = Number(n.totalTime) + time
                finditem = n
              }
            })
          }
        })
        




        data.forEach((item:any)=>{
          if(finditem.parentId == item.id){
            item.totalTime = Number(item.totalTime) + time
          }
        })
      }
    }else{
      console.log("aaaa")
      let finditem2 = {}
      data.forEach((item:any)=>{
        if(item.archive){
          finditem2 = item          
        }
      })
      if(selectedItem.level == '1'){
        finditem2.totalTime = Number(finditem2.totalTime) + time
      }else if(selectedItem.level == '2'){
        finditem2.children.forEach((item:any)=>{
          if(selectedItem.parentId == item.id){
            item.totalTime = Number(item.totalTime) + time
            finditem2.totalTime = Number(finditem2.totalTime) + time
          }
        })
      }else if(selectedItem.level == '3'){
        let finditem3 = {}
        finditem2.children.forEach((item:any)=>{
          if(selectedItem.parentId == item.id){
            finditem3 = item
            item.totalTime = Number(item.totalTime) + time
            finditem2.totalTime = Number(finditem2.totalTime) + time
          }
        })
        finditem2.children.forEach((item:any)=>{
          if(finditem3.parentId == item.id){
            item.totalTime = Number(item.totalTime) + time
          }
        })
      }
    }

    selectedItem.totalTime = totalTime 
    getTotalTime(2)
  }

  const getTotalTime = (type:number)=>{


    
    
    setAllTotalTime(0)
    // selectedItem.totalTime = totalTime    
    let time = 0
    data.forEach((item:any)=>{
      // console.log(item)
      time = time + Number(item.totalTime)
    })
    setAllTotalTime(time)
    if(type == 2){
      setModalVisible(!modalVisible);
    }
  }

  const onChangeTime = (text:any,type:number)=>{
    
    // console.log(type)
    if(type == 1){

      if(text > 24 * 365){
        setTotalTime((24 * 365).toString())
        setAverageTime(getAverageTime((24 * 365).toString()))
      }else{
        setTotalTime(text)
        setAverageTime(getAverageTime(text))

      }
      // console.log(text)
      
    }else{
      setAverageTime(text)

      if(text > 24){
        setTotalTime((24*365).toString())
        setAverageTime('24')
      }else{
        setAverageTime(text)
        setTotalTime((text*365).toString())
      }
      
    }
  }
  const openInput = ( id:any,name:any,totalTime:any,item:any)=>{


    setSelectItem(item)
    setTotalTime(totalTime)
    setAverageTime(getAverageTime(totalTime))
    setModalVisible(true)
  }


 

  useFocusEffect(
    React.useCallback(() => {
      init(pageCurrentYear)
      return () => {
        
      };
    }, [])
  );
  const init = (year:string) => {
    // console.log(year)
    // console.log('1231231231')
    setSelectItem({totalTime: "", level: "", parentId: "", archive: false,})
    // setData([])
    setisLaoding(true)
    getList({year}).then((res:any)=>{
      
      // console.log(res.data.events)
      setData(res.data.events)
      // setData(events)     
      // console.log(JSON.stringify(res.data))
      setisLaoding(false)
      
    }).catch(()=>{
      setisLaoding(false)
    })

  }
  const fetchData =  async ()=>{
    let guideBudget = await AsyncStorage.getItem('guideBudget')
    if(!guideBudget){
      setModalVisible2(true)
    }
  }
  useEffect(() => {
    // init()
    // AsyncStorage.removeItem('guideBudget')
    fetchData()
    
    // 在组件卸载时清除监听器
    if (Platform.OS === 'android') {
      if (UIManager.setLayoutAnimationEnabledExperimental) {
        UIManager.setLayoutAnimationEnabledExperimental(true);
      }
    }
    getTotalTime(1)
    return () => {

    };



  }, [data]);



  const renderItem = ({item})=>(
    <RenderItemDom openInput={openInput} item={item} />
  )

  const renderEmptyComponent = () => {
    return (
      <EmptyView style={{paddingTop:'50%',paddingBottom:'50%'}}/>
    )
  }


  return (
    <S.GrayContainer style={styles.content}>
      <NativeBaseProvider>
        <View style={styles.container} >
          
          <Title init={init} year={pageCurrentYear}/>
          {
            isLaoding && !(data&&data.length)
            ?
            <SkeletonView/>
            :
            <FlatList
              showsVerticalScrollIndicator={false}
              data={data}
              renderItem={renderItem}
              keyExtractor={item => item.id}
              ListEmptyComponent={renderEmptyComponent}
            />
            
            
          }
          

          <Modal
            animationType="fade"
            transparent={true}
            visible={modalVisible}
            statusBarTranslucent={true}
            onRequestClose={() => {
              // Alert.alert("Modal has been closed.");
              setModalVisible(!modalVisible);
            }}
          >
            <View style={styles2.centeredView2}>
              <View style={styles2.modalView}>
                <View style={styles2.topBox}>
                  <Text style={styles2.topBoxTitle}>编辑预算</Text>
                  <Text style={styles2.tags}>{selectedItem.name}</Text>
                  <View style={styles2.inputBox}>
                    <View style={styles2.inputItem}>
                      <Text style={styles2.inputText}>总计h</Text>
                      <TextInput
                        style={styles2.input}
                        keyboardType="numeric"
                        placeholder='请输入'
                        placeholderTextColor='#D1D1D6'
                        onChangeText={text => onChangeTime(text,1)}
                        value={totalTime.toString()}
                      />
                    </View>
                    <View style={[styles2.inputItem, { marginLeft: 12 }]}>
                      <Text style={styles2.inputText}>h/天</Text>
                      <TextInput
                        style={styles2.input}
                        keyboardType="numeric"
                        placeholder='请输入'
                        placeholderTextColor='#D1D1D6'
                        onChangeText={text => onChangeTime(text,2)}
                        value={averageTime}
                      />
                    </View>
                  </View>

                </View>
                <View style={styles2.bottomBtns}>
                  <TouchableOpacity
                    style={[styles2.bottomBtnItem, styles2.bottomBtnItem2]}
                    onPress={() => {
                      setModalVisible(!modalVisible);
                    }}
                  >
                    <Text style={[styles2.textStyle, { color: 'rgba(0,0,0,.64)' }]}>取消</Text>

                  </TouchableOpacity>
                  <TouchableOpacity
                    style={styles2.bottomBtnItem}
                    onPress={() => {
                      // setModalVisible(!modalVisible);
                      setTotalTimeFun()

                      submit()

                      
                      
                      // navigation.navigate('Login')
                    }}
                  >
                    <Text style={styles2.textStyle}>确认</Text>

                  </TouchableOpacity>
                </View>



              </View>
            </View>
          </Modal>



        </View>
        <View style={styles.bottom}>
          <Text style={styles.bottomLeft}>总计</Text>
          <View style={styles.bottomRight}>
            {
              allTotalATime - (365*24) > 0 
              ?
              <Text style={styles.bottomLeftText}>超出{returnFloat1(allTotalATime - 365*24,1)}h</Text>
              :
              <Text style={[styles.bottomLeftText,{color:'#8E8E93'}]}>剩余{returnFloat1(365*24 - allTotalATime,1)}h</Text>
            }
            <Text style={styles.bottomRightText}>{returnFloat1(allTotalATime,1)}h</Text>
          </View>
        </View>
      </NativeBaseProvider>
      <MadalScreen modalVisible={modalVisible2} setModalVisible={setModalVisible2}/>

    </S.GrayContainer>

  );




};

export default Budget;
const styles = StyleSheet.create({
  content: {
    // height: '100%',
    backgroundColor: '#fff',
    display:'flex',
    flexDirection:'column',
    justifyContent:'space-between',
    paddingBottom:0,
    paddingTop:0,

  },
  bottom:{
    width:'100%',
    // position:'absolute',
    // bottom:0,
    height:48,
    display:'flex',
    flexDirection:'row',
    justifyContent:'space-between',
    backgroundColor:'#fff',
    paddingHorizontal:32,
    paddingVertical:12,
    borderTopLeftRadius:32,
    borderTopRightRadius:32,
    elevation: 5, // 阴影深度，仅在 Android 上生效
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.08,
    shadowRadius: 3,
    borderBottomWidth:1,
    borderColor:'#F2F2F7',
    alignItems:'center'
    
  },
  bottomLeft:{
    fontSize:18,
    color:'#1C1C1E',
    fontWeight:'700',
    fontFamily:'HarmonyOS Sans SC',
  },
  bottomRight:{
    flexDirection:'row',
    alignItems:'flex-end',
  },
  bottomLeftText:{
    fontSize:12,
    fontFamily:'HarmonyOS Sans SC',
    color:'#E34949',
    marginRight:8,
    fontWeight:'700',
    lineHeight:18
  },
  bottomRightText:{
    fontSize:18,
    fontFamily:'HarmonyOS Sans SC',
    color:'#3765A6',
    fontWeight:'700'
  },
  container: {
    flex:1,
    // height:"100%",
    paddingVertical: 16,
    paddingHorizontal: 16,
    paddingBottom:0,
    backgroundColor:'#fff'
  },

  titleBox: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems:'center',
    marginBottom: 16,
  },
  titleText: {
    color: '#000',
    lineHeight: 24,
    fontSize: 18,
    fontFamily:'HarmonyOS Sans SC',
    fontWeight: '700',
  },
  titleBoxRight: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  itemTitle: {
    width: "100%",
    backgroundColor: 'rgba(244, 244, 244, 1)',
    paddingHorizontal: 12,
    paddingRight: 0,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between'
  },
  itemTitleLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '50%',
  },
  itemTitleLeftText: {
    maxWidth:'70%',
    fontSize: 14,
    fontFamily:'HarmonyOS Sans SC',
    fontWeight: '700',
    color: 'rgba(28, 28, 30, 1)',
    marginRight:10,
    // flex:1,

  },
  itemTitleRight: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'

  },
  itemTitleRightText: {
    width: '50%',
    textAlign: 'right',
    paddingVertical: 14,
    paddingRight: 16,
    color:'#2C2C2E',
    fontSize:14,
    fontFamily:'HarmonyOS Sans SC',
    fontWeight:700,
    lineHeight:24
  },
  customBody: {
    // borderTopWidth: 2,
    borderColor: "#fff",
    // borderStyle: 'solid',
    // flexDirection:'row',
    width: "100%",
    backgroundColor: 'rgba(244, 244, 244, 1)',

  },
  customBodyItem: {
    flexDirection: 'row',
  },
  customBodyLeft: {
    flexDirection: 'row',
    alignItems: 'center',
    width: '50%',
    paddingVertical: 12,
    paddingHorizontal: 12,
    borderColor:"#fff",
    // borderTopWidth:2,
  },
  customBodyRight: {
    flex: 1,
    flexDirection: 'row',

  },
  customBodyRightItem: {
    width: "50%",
    textAlign: 'right',
    borderLeftWidth: 2,
    // borderTopWidth:2,
    borderColor: "#fff",
    borderStyle: 'solid',
    paddingVertical: 12,
    paddingHorizontal: 16,
  },
  customBodyRightItemText: {
    textAlign: 'right',
    fontSize:14,
    fontFamily:'HarmonyOS Sans SC',
    lineHeight:20,
    color:'#2C2C2E'
  },
  actionItem:{
    // textAlign:'center',
    // backgroundColor:'red',
    flexDirection:'row',
    alignItems:'center',
    borderBottomWidth:1,
    borderColor:'#eee'
    // justifyContent:'center',
    
    // color:'rgba(48, 49, 51, 1)'
  },
  actionItemText:{
    fontSize:16,
    color:'rgba(48, 49, 51, 1)'
  },
});
const styles2 = StyleSheet.create({
  centeredView2: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: 'rgba(0,0,0,.6)',
    padding: 20
  },
  modalView: {
    backgroundColor: "white",
    borderRadius: 20,
    overflow: "hidden",
    alignItems: "center",
    shadowColor: "#000",
    justifyContent: 'center',
    width: '100%'
  },
  bottomBtns: {
    flexDirection: 'row',
    width: "100%",
  },
  bottomBtnItem: {
    width: '50%',
    alignItems: 'center',
    justifyContent: 'center',
    height: 56,
    // backgroundColor:'red',
    borderTopWidth: 1,
    borderColor: 'rgba(0,0,0,.1)',
    borderStyle: 'solid'
  },
  bottomBtnItem2: {
    borderRightWidth: 1,
    borderColor: 'rgba(0,0,0,.1)',
    borderStyle: 'solid'
  },
  textStyle: {
    fontSize: 16,
    fontFamily:'HarmonyOS Sans SC',
    color: '#4371B1',
  },
  topBox: {
    padding: 16,
    justifyContent: 'center',
    alignItems: 'center',
    width: '100%',
    paddingBottom:32
    // backgroundColor:'red'
  },
  topBoxTitle: {
    color: '#4371B1',
    fontSize: 18,
    fontFamily:'HarmonyOS Sans SC',
    fontWeight: '500',
    justifyContent: 'center',
    alignContent: 'center'
  },
  tags: {
    width: '100%',
    textAlign: 'left',
    backgroundColor: '#F5F5F5',
    marginTop: 16,
    paddingHorizontal: 16,
    paddingVertical: 6,
    borderRadius: 8,
    overflow: 'hidden',
    fontSize: 14,
    fontWeight:'500',
    fontFamily:'HarmonyOS Sans SC',
    color: '#000000',
    marginBottom: 16,
    lineHeight:20,
  },
  inputBox: {
    flexDirection: 'row',
    width: '100%',
  },
  inputItem: {
    width: "50%",

  },
  inputText: {
    fontSize: 12,
    fontFamily:'HarmonyOS Sans SC',
    color: '#000000',
    marginBottom: 4,
    lineHeight:20

  },
  input: {
    width: 140,
    height: 40,
    borderColor: 'rgba(0,0,0,.2)',
    borderWidth: 1,
    borderRadius: 4,
    paddingHorizontal: 16,
    color:"#000"
  },
});